<form nz-form [formGroup]="formGroup">
  <nz-form-item>
    <nz-form-label [nzSpan]="labelSpan" nzRequired>{{ 'outlay.columns.name' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="contSpan" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="nameErrorTpl">
      <input nz-input formControlName="name" [placeholder]="'outlay.modify.name_placeholder'|translate" />
      <ng-template #nameErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">{{ 'outlay.modify.name_required' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="labelSpan" nzRequired>{{ 'outlay.columns.type' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="contSpan" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="nameErrorTpl">
      <input nz-input formControlName="type" [placeholder]="'outlay.modify.name_placeholder'|translate" />
      <ng-template #nameErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">{{ 'outlay.modify.name_required' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="labelSpan" nzRequired>{{ 'outlay.columns.money' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="contSpan" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="nameErrorTpl">
      <input nz-input formControlName="money" [placeholder]="'outlay.modify.name_placeholder'|translate" />
      <ng-template #nameErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">{{ 'outlay.modify.name_required' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="labelSpan" nzRequired>{{ 'outlay.columns.time' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="contSpan" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="nameErrorTpl">
      <input nz-input formControlName="time" [placeholder]="'outlay.modify.name_placeholder'|translate" />
      <ng-template #nameErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">{{ 'outlay.modify.name_required' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="labelSpan">{{ 'outlay.columns.mark' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="contSpan" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="nameErrorTpl">
      <input nz-input formControlName="mark" [placeholder]="'outlay.modify.name_placeholder'|translate" />
      <ng-template #nameErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">{{ 'outlay.modify.name_required' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
</form>